import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; // 导入 useHistory
import '../BigDate/FinancialAnalysis.css';

//引入echarts图表
import FAOne from './FA_Echarts/FA_one';
import FATwo from './FA_Echarts/FA_two';
import FASelectOne from './FA_Echarts/FA_right_select_one';
import FASelectTwo from './FA_Echarts/FA_right_select_two';
import FASelectThree from './FA_Echarts/FA_right_select_three';
import FASelectFour from './FA_Echarts/FA_right_select_four';
import FAThree from './FA_Echarts/FA_three';

export default function FinancialAnalysis() {
    const [activeTab, setActiveTab] = useState(4); // 默认激活第一个选项卡
    const [activeSelect, setActiveSelect] = useState(1); // 默认激活第一个选项卡
    const navigate = useNavigate(); // 使用 useHistory 钩子

    const handleTabClick = (index) => {
        setActiveTab(index);
        if (index === 1) { // 如果点击的是财务分析
            //console.log(index);
            navigate('/da');
        } else if (index === 5) {
            navigate('/hospitalComplex/departmentAnalysis');
        }
    };

    const handleIndex = (index) => {
        setActiveSelect(index);
    }
    return (
        <div className="FA_body">
            <div className="body_top">
                <div className="body_top_word_one">
                    东软医院医疗卫生大数据平台
                </div>
                <div className="body_top_word_two"></div>
                {/* 头部导航栏 */}
                <div className="body_top_word_three">
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(0)}>
                        <div className={`three_son_d1 ${activeTab === 0 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 0 ? 'first' : ''}`}>综合分析</div>
                        <div className={`three_son_d3 ${activeTab === 0 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(1)}>
                        <div className={`three_son_d1 ${activeTab === 1 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 1 ? 'first' : ''}`}>科室分析</div>
                        <div className={`three_son_d3 ${activeTab === 1 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(2)}>
                        <div className={`three_son_d1 ${activeTab === 2 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 2 ? 'first' : ''}`}>门诊分析</div>
                        <div className={`three_son_d3 ${activeTab === 2 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(3)}>
                        <div className={`three_son_d1 ${activeTab === 3 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 3 ? 'first' : ''}`}>住院动态分析</div>
                        <div className={`three_son_d3 ${activeTab === 3 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(4)}>
                        <div className={`three_son_d1 ${activeTab === 4 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 4 ? 'first' : ''}`}>财务分析</div>
                        <div className={`three_son_d3 ${activeTab === 4 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(5)}>
                        <div className={`three_son_d1 ${activeTab === 5 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 5 ? 'first' : ''}`}>返回后台系统</div>
                        <div className={`three_son_d3 ${activeTab === 5 ? 'yes' : 'no'}`}></div>
                    </div>
                </div>
            </div>
            {/* 内容 */}
            <div className="body_body">
                {/* 左 */}
                <div className="body_body_box_left">
                    {/* 左板块1 */}
                    <div className='body_body_box body_body_box_one'>
                        <div className='body_body_box_header'>
                            <div className='header_word_two'>全院收入结构</div>
                        </div>
                        <div className='body_body_box_main body_body_box_one_main'>
                            <div className='body_body_box_one_main_top'>
                                <div className='one_top_boxOne'>
                                    <div className='one_top_boxOne_son'>
                                        <div className='word_top'>门诊</div>
                                        <div className='word_down'><span className='span_one'>328172</span>元</div>
                                    </div>
                                </div>
                                <div className='one_top_boxTwo'>
                                    <div className='one_top_boxTwo_son'>
                                        <div className='word_top'>住院</div>
                                        <div className='word_down'><span className='span_two'>328172</span>元</div>
                                    </div>
                                </div>
                            </div>
                            <div className='body_body_box_one_main_bottom'>
                                <FAOne></FAOne>
                            </div>
                        </div>
                    </div>
                    {/* 左板块2 */}
                    <div className='body_body_box body_body_box_one'>
                        <div className='body_body_box_header'>
                            <div className='header_word_two'>耗材消耗分析</div>
                        </div>
                        <div className='body_body_box_main body_body_box_one_main'>
                            <div className='body_body_box_one_main_top'>
                                <div className='img_one'></div>
                                <div className='img_two'></div>
                            </div>
                            <div className='body_body_box_one_main_bottom'>
                                <FATwo></FATwo>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 中 */}
                <div className="body_body_box_center">
                    <div className='body_body_box_center_top_box'>
                        <div className='body_body_box_center_top_box_sonOne'>
                            <div className='sonOne_bigBox'>
                                <div>432834</div>
                                <div>医疗总收入</div>
                            </div>
                            <div className='sonTwo_bigBox'>
                                <div>287621</div>
                                <div>门诊收入</div>
                            </div>
                            <div className='sonThree_bigBox'>
                                <div>145213</div>
                                <div>住院收入</div>
                            </div>
                        </div>
                        <div className='body_body_box_center_top_box_sonTwo'>
                            {/* 外侧双叠放梯形 */}
                            <div className="body_body_box_center_top_box_sonTwo_trapezoid_One">
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">21421</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">医保总额</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(万元)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_one"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">3251</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">已使用医保额度</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(万元)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_two"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">1231</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">医保结合额度</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(万元)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_three"></div>
                                </div>
                                <div className='trapezoid_One_box_two'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">30%</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">医保比例占比</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(万元)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_four"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">12%</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">结合闭包比例</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(%)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_five"></div>
                                </div>
                            </div>
                            <div className="body_body_box_center_top_box_sonTwo_trapezoid_Two"></div>
                        </div>
                        <div className='body_body_box_center_top_box_sonTwo'>
                            {/* 外侧双叠放梯形 */}
                            <div className="body_body_box_center_top_box_sonTwo_trapezoid_One">
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">488</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">医生人数</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(人)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_six"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">971</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">护士人数</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(人)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_seven"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">99999</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">总床位数</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(个)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_eight"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">9999</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">空床位数</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(个)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_nine"></div>
                                </div>
                                <div className='trapezoid_One_box_one'>
                                    <div className="trapezoid_One_box_one_top">
                                        <div className="trapezoid_One_box_one_top_wordOne">94%</div>
                                        <div className="trapezoid_One_box_one_top_wordTwo">床位利用率</div>
                                        <div className="trapezoid_One_box_one_top_wordThree">(%)</div>
                                    </div>
                                    <div className="trapezoid_One_box_one_down_ten"></div>
                                </div>
                            </div>
                            <div className="body_body_box_center_top_box_sonTwo_trapezoid_Two"></div>
                        </div>
                    </div>
                    {/* 中间最下层 */}
                    <div className='body_body_box_center_bottom_box'>
                        <div className='body_body_box_center_bottom_box_son'>
                            <div className='body_body_box_center_bottom_box_header'>
                                <div className='header_word_two'>科室收入占比</div>
                            </div>
                            <div className='body_body_box_center_bottom_box_son'>
                                <div>
                                    <div className='body_body_box_center_bottom_box_son_left'>
                                        <div>
                                            <div className='left'></div>
                                            <div className='center'>
                                                <div className='center_img_one'></div>
                                                <div className='center_word'>
                                                    <div className='center_word_one'>1271</div>
                                                    <div className='center_word_two'>门诊(个)</div>
                                                </div>
                                            </div>
                                            <div className='right'></div>
                                        </div>
                                        <div>
                                            <div className='left'></div>
                                            <div className='center'>
                                                <div className='center_img_two'></div>
                                                <div className='center_word'>
                                                    <div className='center_word_one'>1271</div>
                                                    <div className='center_word_two'>门诊(个)</div>
                                                </div>
                                            </div>
                                            <div className='right'></div>
                                        </div>
                                        <div>
                                            <div className='left'></div>
                                            <div className='center'>
                                                <div className='center_img_three'></div>
                                                <div className='center_word'>
                                                    <div className='center_word_one'>1271</div>
                                                    <div className='center_word_two'>门诊(个)</div>
                                                </div>
                                            </div>
                                            <div className='right'></div>
                                        </div>
                                    </div>
                                    <div className='body_body_box_center_bottom_box_son_right'>
                                        <FAThree></FAThree>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 右 */}
                <div className="body_body_box_right">
                    {/* 右板块1 */}
                    <div className='body_body_box body_body_box_one'>
                        <div className='body_body_box_header'>
                            <div className='header_word'>财务费用支出分析</div>
                        </div>
                        <div className='body_body_box_main body_body_box_one_main'>
                            <div className='body_body_box_one_main_top'>
                                <div className='body_body_box_one_main_top_right_son'>
                                    <div className='body_body_box_one_main_top_right_son_img'></div>
                                    <div className='body_body_box_one_main_top_right_son_word'>
                                        <div className='body_body_box_one_main_top_right_son_word_wordOne'>32531</div>
                                        <div className='body_body_box_one_main_top_right_son_word_wordTwo'>运营支出</div>
                                    </div>
                                </div>
                                <div className='body_body_box_one_main_top_right_son'>
                                    <div className='body_body_box_one_main_top_right_son_img'></div>
                                    <div className='body_body_box_one_main_top_right_son_word'>
                                        <div className='body_body_box_one_main_top_right_son_word_wordOne'>13325</div>
                                        <div className='body_body_box_one_main_top_right_son_word_wordTwo'>人员经费</div>
                                    </div>
                                </div>
                                <div className='body_body_box_one_main_top_right_son'>
                                    <div className='body_body_box_one_main_top_right_son_img'></div>
                                    <div className='body_body_box_one_main_top_right_son_word'>
                                        <div className='body_body_box_one_main_top_right_son_word_wordOne'>62255</div>
                                        <div className='body_body_box_one_main_top_right_son_word_wordTwo'>人才培养</div>
                                    </div>
                                </div>
                                <div className='body_body_box_one_main_top_right_son'>
                                    <div className='body_body_box_one_main_top_right_son_img'></div>
                                    <div className='body_body_box_one_main_top_right_son_word'>
                                        <div className='body_body_box_one_main_top_right_son_word_wordOne'>72123</div>
                                        <div className='body_body_box_one_main_top_right_son_word_wordTwo'>固定资产</div>
                                    </div>
                                </div>
                            </div>
                            <div className='body_body_box_one_main_bottom'>
                                <div className='body_body_box_one_main_bottom_imgThree'></div>
                            </div>
                        </div>
                    </div>
                    {/* 右板块2 */}
                    <div className='body_body_box body_body_box_one'>
                        <div className='body_body_box_header'>
                            <div className='header_word_two'>易损消耗支出</div>
                        </div>
                        <div className='body_body_box_main body_body_box_one_main'>
                            <div className='body_body_box_two_main_top'>
                                <div className='body_body_box_two_main_top_boxOne'>
                                    <div>2014年<span>第四季度</span>易损支出排名</div>
                                    <div className='body_body_box_two_main_top_boxOne_select_box'>
                                        <div onClick={() => handleIndex(1)} className={`select_box ${activeSelect === 1 ? 'select_box_first' : 'select_box'}`}>第一季度</div>
                                        &nbsp;
                                        <div onClick={() => handleIndex(2)} className={`select_box ${activeSelect === 2 ? 'select_box_first' : 'select_box'}`}>第二季度</div>
                                        &nbsp;
                                        <div onClick={() => handleIndex(3)} className={`select_box ${activeSelect === 3 ? 'select_box_first' : 'select_box'}`}>第三季度</div>
                                        &nbsp;
                                        <div onClick={() => handleIndex(4)} className={`select_box ${activeSelect === 4 ? 'select_box_first' : 'select_box'}`}>第四季度</div>
                                        &nbsp;
                                    </div>
                                </div>
                            </div>
                            <div className={`body_body_box_two_main_bottom ${activeSelect === 1 ? 'two_main_bottom_first' : 'two_main_bottom'}`}>
                                <FASelectOne></FASelectOne>
                            </div>
                            <div className={`body_body_box_two_main_bottom ${activeSelect === 2 ? 'two_main_bottom_first' : 'two_main_bottom'}`}>
                                <FASelectTwo></FASelectTwo>
                            </div>
                            <div className={`body_body_box_two_main_bottom ${activeSelect === 3 ? 'two_main_bottom_first' : 'two_main_bottom'}`}>
                                <FASelectThree></FASelectThree>
                            </div>
                            <div className={`body_body_box_two_main_bottom ${activeSelect === 4 ? 'two_main_bottom_first' : 'two_main_bottom'}`}>
                                <FASelectFour></FASelectFour>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}